<template>
  <div class="container">
         <h1  style="color: green;">{{msg}}</h1>
    <el-row>
      <el-col :span="6" >
         <el-button type="success" >打印</el-button>
      </el-col>

    </el-row>
    <el-row>
      <el-col :span="6" >键 </el-col>
      <el-col :span="6"> 值 </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" > id </el-col>
      <el-col :span="6" >{{deviceDetail.testDevicePhone.id}}</el-col>

    </el-row>
    <el-row>
      <el-col :span="6" > sn </el-col>
      <el-col :span="6"> {{deviceDetail.testDevicePhone.sn}}</el-col>
      <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit" @click="open_dialogForm('sn')" ></el-button>
        </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" > 品牌 </el-col>
      <el-col :span="6">{{deviceDetail.model.brand}}  </el-col>
       <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit" ></el-button>
        </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" > 型号 </el-col>
      <el-col :span="6"> {{deviceDetail.model.model}} </el-col>
       <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit" ></el-button>
        </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" > 销售型号 </el-col>
      <el-col :span="6"> {{deviceDetail.testDevicePhone.saleModel}} </el-col>

    </el-row>
    <el-row>
      <el-col :span="6" > 监管型号 </el-col>
      <el-col :span="6">{{deviceDetail.testDevicePhone.regulatoryModel}}  </el-col>

    </el-row>
    <el-row>
      <el-col :span="6" > 容量 </el-col>
      <el-col :span="6">{{deviceDetail.testDevicePhone.diskCapacity}}  </el-col>
    </el-row>
      <el-row>
      <el-col :span="6" > 是否有锁 </el-col>
      <el-col :span="6" v-if="deviceDetail.testDevicePhone.isAssociated!=null">{{deviceDetail.testDevicePhone.isAssociated?'有锁':'无锁'}}  </el-col>
        <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit" @click="open_dialogForm('isAssociated')" ></el-button>
        </el-col>
    </el-row>
      <el-row>
      <el-col :span="6" > 品质 </el-col>
      <el-col :span="6">{{deviceDetail.testDevicePhone.quality}}  </el-col>
       <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit"  ></el-button>
        </el-col>
    </el-row>
      <el-row>
      <el-col :span="6" > 状态 </el-col>
      <el-col :span="6">{{deviceDetail.testDevicePhone.passed ?'pass':'fail'}}  </el-col>
       <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit" ></el-button>
        </el-col>
    </el-row>
      <el-row>
      <el-col :span="6" > 成色 </el-col>
      <el-col :span="6">{{deviceDetail.testDevicePhone.deviceCondition}}  </el-col>
        <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit" @click="open_dialogForm('deviceCondition')"></el-button>
        </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" > 年份 </el-col>
      <el-col :span="6" v-if="deviceDetail.model.year"> {{deviceDetail.model.year}} </el-col>
      <el-col :span="6" v-else>--- </el-col>
    </el-row>
     <el-row>
      <el-col :span="6" > 销毁方式 </el-col>
      <el-col :span="6"> {{deviceDetail.model.disposition}}</el-col>
    </el-row>
      <el-row>
      <el-col :span="6" > 用户名 </el-col>
      <el-col :span="6">{{deviceDetail.userName}}</el-col>
    </el-row>
      <el-row>
      <el-col :span="6" > 备注 </el-col>
      <el-col :span="6">{{deviceDetail.testDevicePhone.mark}}</el-col>
       <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit" ></el-button>
        <el-button type="danger" icon="el-icon-delete" ></el-button>
        </el-col>
    </el-row>

      <el-dialog
    :title="'修改'+title"
    :visible.sync="dialogFormVisible"
    width="30%"

    >
    <el-form ref="form" label-width="80px">
        <el-form-item :label="title" v-if="title=='成色'">
                <el-radio-group v-model="deviceCondition">
                    <el-radio label="报废">报废</el-radio>
            <el-radio label="七成新">七成新</el-radio>
            <el-radio label="八成新">八成新</el-radio>
            <el-radio label="九成新">九成新</el-radio>
            <el-radio label="九五新">九五新</el-radio>
            <el-radio label="全新">全新</el-radio>
                </el-radio-group>
            </el-form-item>

        <el-form-item :label="title" v-if="title=='sn'">
          <el-input v-model="sn" autocomplete="off"></el-input>
        </el-form-item>

          <el-form-item :label="title" v-if="title=='有锁无锁'">
        <el-radio-group v-model="isAssociated">
          <el-radio :label="true">有锁</el-radio>
          <el-radio :label="false">无锁</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible=false">取 消</el-button>
    <el-button type="primary" @click="updateDevice">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import {
  reqGetDeviceDetail,
  reqUpdateDevice,
  reqGetBrand,
  reqGetType,
  reqGetMark,
  reqPrintUnLogin
} from '../utils/api'

export default {
  name: 'pcDetail',
  created () {
    this.id = this.$route.query.id
    this.msg = this.$route.query.msg
    this.getDetail()
  },
  data () {
    return {
      id: '',
      msg: '',
      title: '',
      deviceDetail: {},
      dialogFormVisible: false,
      sn: '',
      isAssociated: null,
      deviceCondition: null
    }
  },
  methods: {
    // 读取详细信息
    async getDetail () {
      const res = await reqGetDeviceDetail(this.id)
      if (res.data.code == 0) {
        this.deviceDetail = res.data.data
      }
    },
    // 打开对话框
    open_dialogForm (item) {
      this.title = item
      if (item == 'sn') {
        this.title = 'sn'
        this.sn = this.deviceDetail.testDevicePhone.sn
      }
      if (item == 'isAssociated') {
        this.title = '有锁无锁'
        this.isAssociated = this.deviceDetail.testDevicePhone.isAssociated
      }
      if (item == 'deviceCondition') {
        this.title = '成色'
        this.deviceCondition = this.deviceDetail.testDevicePhone.deviceCondition
      }
      this.dialogFormVisible = true
    },
    // 修改
    async updateDevice () {
      let data = null
      if (this.title == 'sn') {
        if (!this.sn) {
          this.$message.error('请输入sn')
          return
        } else {
          data = { id: this.id, sn: this.sn }
        }
      }
      if (this.title == '成色') {
        if (!this.deviceCondition) {
          this.$message.error('请选择成色')
          return
        } else {
          data = { id: this.id, deviceCondition: this.deviceCondition }
        }
      }
      if (this.title == '有锁无锁') {
        if (this.isAssociated == null) {
          this.$message.error('请选择有锁无锁')
          return
        } else {
          data = { id: this.id, isAssociated: this.isAssociated }
        }
      }

      const res = await reqUpdateDevice(data)
      if (res.data.code == 0) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.dialogFormVisible = false
        this.getDetail()
      } else {
        this.$message.error('修改失败')
      }
    }
  }
}
</script>

<style scoped lang="less">

 .el-row{
    height: 50px;
    display: flex;
    align-items: center;
  }

  .el-row:nth-child(2n+1){
    background-color: #f9f9f9;
  }
  .el-row:nth-child(1){
    background-color: #fff;
    color: blue;
  }
  .container{
    width:900px;
    margin: auto;
    margin-top: 100px;
  }
</style>
